<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<html><head><title>Examples - jQuery::dForm 0.1.3</title><link rel="stylesheet" type="text/css" href="../styles/main.css"><script language=JavaScript src="../javascript/main.js"></script><script language=JavaScript src="../javascript/searchdata.js"></script></head><body class="ContentPage" onLoad="NDOnLoad();"><script language=JavaScript><!--
if (browserType) {document.write("<div class=" + browserType + ">");if (browserVer) {document.write("<div class=" + browserVer + ">"); }}// --></script>

<!--  Generated by Natural Docs, version 1.5 -->
<!--  http://www.naturaldocs.org  -->

<!-- saved from url=(0026)http://www.naturaldocs.org -->




<div id=Content><div class="CSection"><div class=CTopic id=MainTopic><h1 class=CTitle><a name="Examples"></a>Examples</h1><div class=CBody><p>Some examples on how to use the plugin.&nbsp; Learn more about building forms in the <a href="../files/dform-subscribers-js.html#Usage" class=LFile id=link1 onMouseOver="ShowTip(event, 'tt1', 'link1')" onMouseOut="HideTip('tt1')">Usage</a> and <a href="../files/dform-extensions-js.html#Extension" class=LFile id=link2 onMouseOver="ShowTip(event, 'tt2', 'link2')" onMouseOut="HideTip('tt2')">Extension</a> chapters or read the core <a href="../files/dform-js.html#Plugin" class=LFile id=link3 onMouseOver="ShowTip(event, 'tt3', 'link3')" onMouseOut="HideTip('tt3')">Plugin</a> documentation.</p><!--START_ND_SUMMARY--><div class=Summary><div class=STitle>Summary</div><div class=SBorder><table border=0 cellspacing=0 cellpadding=0 class=STable><tr class="SMain"><td class=SEntry><a href="#Examples" >Examples</a></td><td class=SDescription>Some examples on how to use the plugin. </td></tr><tr class="SGroup SIndent1"><td class=SEntry><a href="#Examples" >Examples</a></td><td class=SDescription></td></tr><tr class="SExample SIndent2 SMarked"><td class=SEntry><a href="#Simple_login_form" >Simple login form</a></td><td class=SDescription>Demonstration of a simple login form</td></tr><tr class="SExample SIndent2"><td class=SEntry><a href="#Complex_registration_form" >Complex registration form</a></td><td class=SDescription>A more complex registration form using the validation plugin</td></tr><tr class="SExample SIndent2 SMarked"><td class=SEntry><a href="#jQuery_UI_controls" >jQuery UI controls</a></td><td class=SDescription>Examples for the support of jQuery UI controls</td></tr></table></div></div><!--END_ND_SUMMARY--></div></div></div>

<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="Examples"></a>Examples</h3></div></div>

<div class="CExample"><div class=CTopic><h3 class=CTitle><a name="Simple_login_form"></a>Simple login form</h3><div class=CBody><p>Demonstration of a simple login form</p><blockquote><pre>{
    &quot;action&quot; : &quot;index.html&quot;,
    &quot;method&quot; : &quot;get&quot;,
    &quot;elements&quot; :
    [
        {
            &quot;type&quot; : &quot;p&quot;,
            &quot;html&quot; : &quot;You must login&quot;
        },
        {
            &quot;name&quot; : &quot;username&quot;,
            &quot;id&quot; : &quot;txt-username&quot;,
            &quot;caption&quot; : &quot;Username&quot;,
            &quot;type&quot; : &quot;text&quot;,
            &quot;placeholder&quot; : &quot;E.g. user@example.com&quot;
        },
        {
            &quot;name&quot; : &quot;password&quot;,
            &quot;caption&quot; : &quot;Password&quot;,
            &quot;type&quot; : &quot;password&quot;
        },
        {
            &quot;type&quot; : &quot;submit&quot;,
            &quot;value&quot; : &quot;Login&quot;
        }
    ]
}</pre></blockquote></div></div></div>

<div class="CExample"><div class=CTopic><h3 class=CTitle><a name="Complex_registration_form"></a>Complex registration form</h3><div class=CBody><p>A more complex registration form using the validation plugin</p><blockquote><pre> {
    &quot;action&quot; : &quot;index.html&quot;,
    &quot;method&quot; : &quot;post&quot;,
    &quot;elements&quot; :
    [
        {
            &quot;type&quot; : &quot;fieldset&quot;,
            &quot;caption&quot; : &quot;User information&quot;,
            &quot;elements&quot; :
            [
                {
                    &quot;name&quot; : &quot;email&quot;,
                    &quot;caption&quot; : &quot;Email address&quot;,
                    &quot;type&quot; : &quot;text&quot;,
                    &quot;placeholder&quot; : &quot;E.g. user@example.com&quot;,
                    &quot;validate&quot; :
                    {
                    &quot;email&quot; : true
                    }
                },
                {
                    &quot;name&quot; : &quot;password&quot;,
                    &quot;caption&quot; : &quot;Password&quot;,
                    &quot;type&quot; : &quot;password&quot;,
                    &quot;id&quot; : &quot;registration-password&quot;,
                    &quot;validate&quot; :
                    {
                        &quot;required&quot; : true,
                        &quot;minlength&quot; : 5,
                        &quot;messages&quot; :
                        {
                            &quot;required&quot; : &quot;Please enter a password&quot;,
                            &quot;minlength&quot; : &quot;At least {0} characters long&quot;
                        }
                    }
                },
                {
                    &quot;name&quot; : &quot;password-repeat&quot;,
                    &quot;caption&quot; : &quot;Repeat password&quot;,
                    &quot;type&quot; : &quot;password&quot;,
                    &quot;validate&quot; :
                    {
                        &quot;equalTo&quot; : &quot;#registration-password&quot;,
                        &quot;messages&quot; :
                        {
                            &quot;equalTo&quot; : &quot;Please repeat your password&quot;
                        }
                    }
                },
                {
                    &quot;type&quot; : &quot;radiobuttons&quot;,
                    &quot;caption&quot; : &quot;Sex&quot;,
                    &quot;name&quot; : &quot;sex&quot;,
                    &quot;class&quot; : &quot;labellist&quot;,
                    &quot;options&quot; :
                    {
                        &quot;f&quot; : &quot;Female&quot;,
                        &quot;m&quot; : &quot;Male&quot;
                    }
                },
                {
                    &quot;type&quot; : &quot;checkboxes&quot;,
                    &quot;name&quot; : &quot;test&quot;,
                    &quot;caption&quot; : &quot;Receive newsletter about&quot;,
                    &quot;class&quot; : &quot;labellist&quot;,
                    &quot;options&quot; :
                    {
                        &quot;updates&quot; : &quot;Product updates&quot;,
                        &quot;errors&quot; :
                        {
                        &quot;value&quot; : &quot;security&quot;,
                        &quot;caption&quot; : &quot;Security warnings&quot;,
                        &quot;checked&quot; : &quot;checked&quot;
                        }
                    }
                }
            ]
        },
        {
            &quot;type&quot; : &quot;fieldset&quot;,
            &quot;caption&quot; : &quot;Address information&quot;,
            &quot;elements&quot; :
            [
                {
                    &quot;name&quot; : &quot;name&quot;,
                    &quot;caption&quot; : &quot;Your name&quot;,
                    &quot;type&quot; : &quot;text&quot;,
                    &quot;placeholder&quot; : &quot;E.g. John Doe&quot;
                },
                {
                    &quot;name&quot; : &quot;address&quot;,
                    &quot;caption&quot; : &quot;Address&quot;,
                    &quot;type&quot; : &quot;text&quot;,
                    &quot;validate&quot; : { &quot;required&quot; : true }
                },
                {
                    &quot;name&quot; : &quot;zip&quot;,
                    &quot;caption&quot; : &quot;ZIP code&quot;,
                    &quot;type&quot; : &quot;text&quot;,
                    &quot;size&quot; : 5,
                    &quot;validate&quot; : { &quot;required&quot; : true }
                },
                {
                    &quot;name&quot; : &quot;city&quot;,
                    &quot;caption&quot; : &quot;City&quot;,
                    &quot;type&quot; : &quot;text&quot;,
                    &quot;validate&quot; : { &quot;required&quot; : true }
                },
                {
                    &quot;type&quot; : &quot;select&quot;,
                    &quot;name&quot; : &quot;continent&quot;,
                    &quot;caption&quot; : &quot;Choose a continent&quot;,
                    &quot;options&quot; :
                    {
                        &quot;america&quot; : &quot;America&quot;,
                        &quot;europe&quot; :
                        {
                            &quot;selected&quot; : &quot;true&quot;,
                            &quot;id&quot; : &quot;europe-option&quot;,
                            &quot;value&quot; : &quot;europe&quot;,
                            &quot;html&quot; : &quot;Europe&quot;
                        },
                        &quot;asia&quot; : &quot;Asia&quot;,
                        &quot;africa&quot; : &quot;Africa&quot;,
                        &quot;australia&quot; : &quot;Australia&quot;
                    }
                }
            ]
        },
        {
            &quot;type&quot; : &quot;submit&quot;,
            &quot;value&quot; : &quot;Signup&quot;
        }
    ]
}</pre></blockquote></div></div></div>

<div class="CExample"><div class=CTopic><h3 class=CTitle><a name="jQuery_UI_controls"></a>jQuery UI controls</h3><div class=CBody><p>Examples for the support of jQuery UI controls</p><blockquote><pre>{
    &quot;action&quot; : &quot;index.html&quot;,
    &quot;method&quot; : &quot;get&quot;,
    &quot;elements&quot; :
    [
        {
            &quot;type&quot; : &quot;slider&quot;,
            &quot;values&quot; : [ 10, 80 ],
            &quot;range&quot; : true,
            &quot;caption&quot; : &quot;Slider&quot;,
            &quot;id&quot; : &quot;myslider&quot;
        },
        {
            &quot;name&quot; : &quot;textfield&quot;,
            &quot;caption&quot; : &quot;Autocomplete&quot;,
            &quot;type&quot; : &quot;text&quot;,
            &quot;placeholder&quot; : &quot;Type 'A' or 'S'&quot;,
            &quot;autocomplete&quot; :
            {
                &quot;source&quot; :  [ &quot;Apple&quot;, &quot;Acer&quot;, &quot;Sony&quot;, &quot;Summer&quot; ]
            }
        },
        {
            &quot;name&quot; : &quot;date&quot;,
            &quot;caption&quot; : &quot;Datepicker&quot;,
            &quot;type&quot; : &quot;text&quot;,
            &quot;datepicker&quot; : {  &quot;showOn&quot; : &quot;button&quot; }
        },
        {
            &quot;caption&quot; : &quot;A progressbar&quot;,
            &quot;type&quot; : &quot;progressbar&quot;,
            &quot;value&quot; : 40
        },
        {
            &quot;type&quot; : &quot;tabs&quot;,
            &quot;resizable&quot; :
            {
                &quot;minHeight&quot; : 180,
                &quot;minWidth&quot; : 300
            },
            &quot;entries&quot; :
            {
                &quot;tab1&quot;:
                {
                    &quot;caption&quot; : &quot;Step 1&quot;,
                    &quot;elements&quot; :
                    [
                        {
                            &quot;name&quot; : &quot;textfield&quot;,
                            &quot;caption&quot; : &quot;Just a textfield&quot;,
                            &quot;type&quot; : &quot;text&quot;
                        },
                        {
                            &quot;type&quot; : &quot;span&quot;,
                            &quot;html&quot; : &quot;Some HTML in tab 1&quot;
                        }
                    ]
                },
                &quot;tab2&quot; :
                {
                    &quot;caption&quot; : &quot;Step 2&quot;,
                    &quot;elements&quot; :
                    [
                        {
                            &quot;type&quot; : &quot;span&quot;,
                            &quot;html&quot; : &quot;Some HTML in tab 2&quot;
                        }
                    ]
                }
            }
        },
        {
            &quot;type&quot; : &quot;accordion&quot;,
            &quot;caption&quot; : &quot;Accordion&quot;,
            &quot;entries&quot; :
            [
                {
                    &quot;caption&quot; : &quot;Entry 1&quot;,
                    &quot;elements&quot; :
                    [
                        {
                            &quot;type&quot; : &quot;span&quot;,
                            &quot;html&quot; : &quot;Some HTML in accordion entry 1&quot;
                        }
                    ]
                },
                {
                    &quot;caption&quot; : &quot;Entry 2&quot;,
                    &quot;elements&quot; :
                    [
                        {
                            &quot;type&quot; : &quot;span&quot;,
                            &quot;html&quot; : &quot;Some HTML in accordion entry 2&quot;
                        }
                    ]
                }
            ]
        }
    ]
}</pre></blockquote></div></div></div>

</div><!--Content-->


<div id=Footer>Copyright &copy; 2011 - David Luecke - daff@neyeon.de&nbsp; &middot;&nbsp; <a href="http://www.naturaldocs.org">Generated by Natural Docs</a></div><!--Footer-->


<div id=Menu><div class=MTitle>jQuery::dForm 0.1.3</div><div class=MEntry><div class=MFile><a href="readme-txt.html">Home</a></div></div><div class=MEntry><div class=MFile id=MSelected>Examples</div></div><div class=MEntry><div class=MFile><a href="../files/dform-subscribers-js.html">Usage</a></div></div><div class=MEntry><div class=MFile><a href="../files/dform-extensions-js.html">Extension</a></div></div><div class=MEntry><div class=MFile><a href="../files/dform-js.html">Plugin</a></div></div><div class=MEntry><div class=MFile><a href="changelog-txt.html">Changelog</a></div></div><div class=MEntry><div class=MFile><a href="license-txt.html">License</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent1')">Index</a><div class=MGroupContent id=MGroupContent1><div class=MEntry><div class=MIndex><a href="../index/General.html">Everything</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Types.html">Types</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Subscribers.html">Subscribers</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Functions.html">Functions</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Files.html">Files</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Examples.html">Examples</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Variables.html">Variables</a></div></div></div></div></div><script type="text/javascript"><!--
var searchPanel = new SearchPanel("searchPanel", "HTML", "../search");
--></script><div id=MSearchPanel class=MSearchPanelInactive><input type=text id=MSearchField value=Search onFocus="searchPanel.OnSearchFieldFocus(true)" onBlur="searchPanel.OnSearchFieldFocus(false)" onKeyUp="searchPanel.OnSearchFieldChange()"><select id=MSearchType onFocus="searchPanel.OnSearchTypeFocus(true)" onBlur="searchPanel.OnSearchTypeFocus(false)" onChange="searchPanel.OnSearchTypeChange()"><option  id=MSearchEverything selected value="General">Everything</option><option value="Examples">Examples</option><option value="Files">Files</option><option value="Functions">Functions</option><option value="Subscribers">Subscribers</option><option value="Types">Types</option><option value="Variables">Variables</option></select></div></div><!--Menu-->



<!--START_ND_TOOLTIPS-->
<div class=CToolTip id="tt1"><div class=CFile>Subscribers are the core concept of the jQuery.dForm.</div></div><div class=CToolTip id="tt2"><div class=CFile>This page covers how to extend the dform plugin of your own types and subscribers as well as providing a documentation for form related jQuery plugins that are already supported out of the box.</div></div><div class=CToolTip id="tt3"><div class=CFile>This is the documentation for the core helpers and jQuery functions of the plugin.</div></div><!--END_ND_TOOLTIPS-->




<div id=MSearchResultsWindow><iframe src="" frameborder=0 name=MSearchResults id=MSearchResults></iframe><a href="javascript:searchPanel.CloseResultsWindow()" id=MSearchResultsWindowClose>Close</a></div>


<script language=JavaScript><!--
if (browserType) {if (browserVer) {document.write("</div>"); }document.write("</div>");}// --></script></body></html>